
var xhr = new XMLHttpRequest();
xhr.open('get', '../nav.json');
xhr.send();
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  localStorage.setItem('navData', JSON.stringify(data))
  oneRender(data)
}

function oneRender(data) {
  var ul = document.querySelector('.one ul');
  ul.innerHTML = data.map(function (item, index) {
    return `<li category="${item.category}" class=${index == 0 ? 'active' : ''} active">${item.name}</li>`
  }).join('')
}

var one = document.querySelector('.one');
one.onclick = function () {
  var e = window.event;
  if (e.target.tagName == 'LI') {
    var data = JSON.parse(localStorage.getItem('navData'));
    var subList = data.filter(function (item) {
      return item.name == e.target.innerHTML;
    })[0].subList
    twoRender(subList);

    var li = document.querySelectorAll('.one li');
    for (var i = 0; i < li.length; i++) {
      li[i].classList.remove('active');
    }
    e.target.classList.add('active');

    var category = e.target.getAttribute('category');
    getList({ category: category });
  }
}

var two = document.querySelector('.two');
function twoRender(subList) {
  var ul = document.querySelector('.two ul');
  if (subList.length == 0) {
    two.style.display = 'none';
  } else {
    two.style.display = 'flex';
    ul.innerHTML = subList.map(function (item) {
      return `<li sub_category="${item.sub_category}">${item.name}</li>`
    }).join('')
  }
}

two.onclick = function () {
  var e = window.event;
  if (e.target.tagName == 'LI') {
    var li = document.querySelectorAll('.two li');
    for (var i = 0; i < li.length; i++) {
      li[i].classList.remove('active');
    }
    e.target.classList.add('active');

    var sub_category = e.target.getAttribute('sub_category');
    if (sub_category) {
      getList({ sub_category: sub_category })
    } else {
      getList()
    }
  }
}



getList()

function getList(option) {
  var listXhr = new XMLHttpRequest();
  var url = `https://muse.huaban.com/api/v1/services/`;
  if (option) {
    var str = '';
    for (var key in option) {
      str += key + '=' + option[key] + '&'
    }
    str = str.substr(0, str.length - 1);
    url = url + '?' + str;
  }
  listXhr.open('get', url);
  listXhr.send();
  listXhr.onload = function () {
    var list = JSON.parse(listXhr.responseText);

    if (list.length == 0) {
      var ul = document.querySelector('.list ul');
      ul.innerHTML = '<div class ="noData">此分类暂时没有数据</div>'
    }
    //去重
    var newList = [list[0]];
    for (var i = 0; i < list.length; i++) {
      var flag = newList.every(function (item) {
        return item.service_id != list[i].service_id
      })
      if (flag == true) {
        newList.push(list[i])
      }
    }
    console.log(newList)
    listRender(newList);
    //点击分页后，滚动条设置在最顶端
    scrollTo({ top: 0, behavior: 'smooth' })
  }
}

function listRender(list) {
  var ul = document.querySelector('.list ul');
  ul.innerHTML = list.map(function (item) {
    return `<li>
              <img service_id="${item.service_id}" src="https://muse-img.huaban.com/${item.cover[0].key}_/both/280x280" alt="">
              <h3>${item.name}</h3>
              <p>${item.price == 0 ? '价格面议' : `￥${item.price}/${item.unit}`}</p >
            </li>`
  }).join('')
}

var listen = document.querySelector('.list ul');
listen.onclick = function () {
  var e = window.event;
  if (e.target.tagName == 'IMG') {
    var id = e.target.getAttribute('service_id')
    location.href = '../html/Product.html?service_id=' + id
  }
}

